<template>
  <div>
    <!-- 原理是给这个盒子添加一个css样式属性，display：none -->
    <!-- <div v-show='flag'>我是盒子</div> -->
    <!-- 原理是删除这个节点，需要再生成一个 -->
    <!-- <div v-if='flag'>我是盒子</div>
    <img  v-show='flag' src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-09-28%2F5f714a326c0ea.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672217973&t=19f4f9b4e075959de8b78b967812608f" alt="">
    <button @click.prevent=fn1>显示隐藏</button> -->

<!-- v-if v-else-if v-else 三个要在同一级 -->
    <!-- 只有一个v-if -->
    <div v-if='age>60'>60岁以上，唱跳rap</div>
    <div v-else-if='age>30'>30岁以上，抽烟喝酒烫头</div>
    <div v-else-if='age>20'>20岁以上，煮茶焚香下棋</div>
    <!-- v-else后面不写条件 -->
    <div v-else >20岁以下，练习广场舞</div>
  </div>
</template>

<script>
export default {
data(){
  return{
    flag:true,
    age:33
  }
},
methods:{
  fn1(){
   this.flag=!this.flag
  }
}
}
</script>

<style>

</style>